<template>
  <div class="roster-container">
    <!-- 顶部区域 -->
    <div class="header flex">
      <div class="selecte-section flex">
        <!-- <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          <div class="selecte-title">行政部门</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
        <Input search enter-button placeholder="搜索报表、报表描述" class="selecte-section-search" /> -->
      </div>
      <div class="right flex">
        <Button type="success" class="add-btn" @click="openRightCard">新增岗位</Button>
        <!-- <Dropdown style="margin-left: 20px">
          <Button class="more-btn">
            
            更多功能
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>批量删除员工</DropdownItem>
            <DropdownItem>回收站</DropdownItem>
          </DropdownMenu>
        </Dropdown> -->
      </div>
    </div>

    <div class="main-wrap">
      <div class="left-wrap">
        <div class="title-box">
          <div class="title">
            <span class="line"></span>
            <span>岗位类别</span>
          </div>
          <div class="setting">
            <Icon type="md-help-circle" size="18" />设置
          </div>
        </div>

        <div class="category">
          <div class="cate-title">
            <Icon type="ios-folder-open-outline" size="20" color='#bfdeff' />
            <span>全部</span>
          </div>
          <ul class="cate-list">
            <li class="c-item" v-for="(item,index) in postTypeList" :key="index">{{item.post_type}}</li>
          </ul>
        </div>
      </div>
      <div class="right-table">
        <Table width="100%" :columns="columns" :data="postList" class="table4 mt24" :loading="tableLoading"></Table>
      </div>
    </div>

    <!-- 快速编辑 -->
    <div class="mask none" :class="{block:rightCardCloseStatus}" @click="closeRightCard"></div>
    <div class="right-cart none" :class="{block:rightCardCloseStatus}">
      <div class="right-cart-top flex">
        <div class="right-cart-title">新增岗位</div>
        <Icon type="md-close" class="right-cart-close" size="24" @click="closeRightCard" />
      </div>
      <div class="right-cart-body">
        <Form :model="formItem" :label-width="110" ref="formValidate" :rules="ruleValidate">
          <div class="form-item-row">
            <FormItem label="岗位名称">
              <Input v-model="formItem.post_name" placeholder="姓名" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="岗位编码" class="form-item">
              <Input v-model="formItem.post_code" placeholder="工号" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="所属组织" class="form-item">
              <Select v-model="formItem.organization_name" class="form-input" @on-change="selectOrg" >
                <Option :value="item.organization_name" v-for="(item,index) in orgList" :key="index">{{item.organization_name}}</Option>
              </Select>
            </FormItem>
            <!-- <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" /> -->
          </div>
          <div class="form-item-row">
            <FormItem label="岗位类别">
              <Select v-model="formItem.post_type_name" class="form-input" @on-change="selectPostType">
                <Option :value="item.post_type_name" v-for="(item,index) in postTypeList" :key="index">{{item.post_type_name}}</Option>
              </Select>
            </FormItem>
            <!-- <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" /> -->
          </div>
          <!-- <div class="form-item-row form-item-row2 form-item-row3">
            <FormItem label="职级">
              <Select v-model="formItem.post_level" class="form-input">
                <Option value="t0">t0</Option>
              </Select>
            </FormItem>
            <div class="post-level-mask" @click="showPosLevelModal"></div>
            <div class="form-item-tip">
              管理证件类型，
              <a>点击这里</a>
            </div>
          </div>-->
        </Form>
      </div>
      <div class="right-cart-footer">
        <Button class="cancle-btn-border" @click="closeRightCard">取消</Button>
        <Button class="save-btn-green ml12" @click="savePost">保存</Button>
      </div>
    </div>
    <!-- 快速编辑end -->

    <!-- 岗位设置 -->
    <!-- <div class="mask none " :class="{block:rightCardCloseStatus}" @click="closeRightCard"></div>
      <div class="right-cart none" :class="{block:rightCardCloseStatus}">
        <div class="right-cart-top flex">
          <div class="right-cart-title">人员编制</div>
          <Icon type="md-close" class="right-cart-close" size="24" @click="closeRightCard" />
        </div>
        <div class="right-cart-body">
          <div class="cart-item cart-item1">
            <div class="edit-item">
              <h2>
                当前编制人数：
                <span>3</span>人
                <em>（缺编3人）</em>
              </h2>
              <Button type="primary">调整编制</Button>
            </div>
            <div class="edit-hidden">
              <div class="edit-hidden-wrap">
                <div class="hidden-label">调整编制</div>
                <div class="hidden-input">
                  <InputNumber  :editable="false" class="hidden-inp"></InputNumber>
                </div>
                <Button class="hidden-btn">
                  <Icon type="ios-checkmark" size="18" />
                </Button>
                <Button class="hidden-btn">
                  <Icon type="ios-close" size="18" />
                </Button>
                <div class="hidden-btns"></div>
              </div>
              <div class="hidden-fotter">
                <Checkbox>不限编制</Checkbox>
              </div>
            </div>
          </div>

          <div class="cart-item cart-item2">
            <h2>部门人员概况</h2>
            <span>在职： 0人</span>
            <span>全职： 0人</span>
            <span>离职中： 0人</span>
            <span>待入职： 0人</span>
          </div>
          <div class="cart-item cart-item2 mt20">
            <h2>
              岗位满编设置
            
            </h2>
            <div class="cart-item-desc">
              启用后，当岗位编制人数满编时不允许发起录入审批和调入审批
            </div>
            <div class="switch">
              <i-switch size="large">
              <div slot="open">开启</div>
              <div slot="close">关闭</div>
            </i-switch>
            </div>
          </div>
          <div class="cart-item cart-item2 mt20">
            <h2>
              岗位满编设置
            
            </h2>
            <div class="cart-item-desc">
              启用后，当岗位编制人数满编时不允许发起录入审批和调入审批
              <a href="">去调整</a>
            </div>
            <div class="sub-cart-row">
              <div class="job-title">
                行政助理
                <p>
                  <span>缺编3人</span>
                </p>
              </div>
              <div class="middle-num">编制3人</div>
              <div class="right-btns flex">
                <div class="redbtn-text">移除</div>
                <div class="greenbtn-text">调整编制</div>
              </div>
            </div>
            <div class="sub-cart-row">
              <div class="job-title">
                行政助理
                <p>
                  <span>缺编3人</span>
                </p>
              </div>
              <div class="middle-num">编制3人</div>
              <div class="right-btns flex">
                <div class="redbtn-text">移除</div>
                <div class="greenbtn-text">调整编制</div>
              </div>
            </div>
            <div class="sub-cart-row">
              <div class="job-title">
                行政助理
                <p>
                  <span>缺编3人</span>
                </p>
              </div>
              <div class="middle-num">编制3人</div>
              <div class="right-btns flex">
                <div class="redbtn-text">移除</div>
                <div class="greenbtn-text">调整编制</div>
              </div>
            </div>
            <div class="sum">
              <div class="sum-title">合计：</div>
              <div class="sum-item">在岗人数0人</div>
              <div class="sum-item">岗位编制人数3人</div>
            </div>
          </div>
          <Nodata desc="未设置岗位编制"></Nodata>
        </div>
        
    </div>-->
    <!-- 岗位设置end -->

    <!-- modal -->
    <Modal v-model="postLevelModal" title="选择职级" @on-ok="ok" @on-cancel="cancel">
      <div class="modal-body">
        <div class="post-level-content">
          <RadioGroup v-model="postLevelRadio">
            <Radio label="单个职级"></Radio>
            <Radio label="职级范围"></Radio>
          </RadioGroup>
          <div class="single tab-lev" v-if="postLevelRadio == '单个职级'">
            <Form :model="formItem" :label-width="120">
              <FormItem label="职级">
                <Select v-model="formItem.post_type" class="form-input">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select>
              </FormItem>
            </Form>
          </div>
          <div class="range tab-lev" v-else>
            <Form :model="formItem" :label-width="120">
              <FormItem label>
                <FormItem label="职级范围">
                  <Select v-model="formItem.post_type" class="wh140">
                    <Option value="beijing">New York</Option>
                    <Option value="shanghai">London</Option>
                    <Option value="shenzhen">Sydney</Option>
                  </Select>
                  <div class="short-line">----</div>
                  <Select v-model="formItem.post_type" class="wh140">
                    <Option value="beijing">New York</Option>
                    <Option value="shanghai">London</Option>
                    <Option value="shenzhen">Sydney</Option>
                  </Select>
                </FormItem>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </Modal>
    <!-- modal end -->
  </div>
</template>
<script>
import { org } from "@/apis";
import http from "@/utils/http";
export default {
  name: "list",
  data() {
    return {
      postLevelModal: false,
      postLevelRadio: "单个职级",
      postLevelList: [],
      orgList: [],
      postList: [], //岗位列表
      postTypeList: [],
      columns: [
        {
          title: "岗位名称",
          key: "post_name",
          width: 200
        },
        {
          title: "在职人数",
          key: "age",
          width: 120
        },
        {
          title: "全职人数",
          key: "province",
          width: 120
        },
        {
          title: "人员编制",
          key: "city",
          width: 120
        },
        {
          title: "岗位编码",
          key: "post_code",
          width: 120
        },
        {
          title: "所属组织",
          key: "organization_name",
          width: 120
        },
        {
          title: "岗位类别",
          key: "post_type",
          width: 120
        },
        // {
        //   title: "职级",
        //   key: "post_level",
        //   width: 120
        // },
        {
          title: "职等",
          key: "post_level_up",
          width: 120
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 120,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center"
                },
                class: "table-btns-wrap"
              },
              [
                h(
                  "span",
                  {
                    props: {
                      type: "text"
                    },
                    class: "table-action-btn",
                    on: {
                      click: () => {
                        this.toPostEdit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "span",
                  {
                    props: {
                      type: "text"
                    },
                    class: "table-action-btn",
                    on: {
                      click: () => {
                        this.toPostDetail(params.row);
                      }
                    }
                  },
                  "详情"
                )
              ]
            );
          }
        }
      ],
      data4: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          province: "America",
          selection: "",
          avatar: "@/assets/images/avatar-table.png",
          city: "New York",
          zip: 100000
        },
        {
          name: "Jim Green",
          age: 24,
          address: "Washington, D.C. No. 1 Lake Park",
          province: "America",
          city: "Washington, D.C.",
          zip: 100000
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          province: "Australian",
          city: "Sydney",
          zip: 100000
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          province: "Canada",
          city: "Ottawa",
          zip: 100000
        },
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          province: "America",
          city: "New York",
          zip: 100000
        },
        {
          name: "Jim Green",
          age: 24,
          address: "Washington, D.C. No. 1 Lake Park",
          province: "America",
          city: "Washington, D.C.",
          zip: 100000
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          province: "Australian",
          city: "Sydney",
          zip: 100000
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          province: "Canada",
          city: "Ottawa",
          zip: 100000
        }
      ],
      openTableTitle: false,
      formItem: {
        post_name: "",
        post_code: "",
        organization_name: "",
        post_type: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
       
      },
      rightCardCloseStatus: false,
      postRightCardTitle: "新增岗位",
      tableLoading: false
    };
  },
  methods: {
    triggerTableTitle() {
      this.openTableTitle = true;
    },
    cancleTableTitle() {
      this.openTableTitle = false;
    },
    saveTableTitle() {
      this.openTableTitle = false;
    },
    closeRightCard() {
      this.rightCardCloseStatus = false;
    },
    openRightCard(a, b) {
      this.rightCardCloseStatus = true;
    },
    multiEditing() {
      console.log(1);
      console.log(this.columns[0].type);
      if (!this.columns[0].type && this.columns[0].type !== "selection") {
        this.columns.unshift({
          title: " ",
          key: "selection",
          type: "selection",
          width: "60"
        });
      } else {
        this.columns.shift();
      }
    },
    addEmployee() {
      this.$router.push("/personnel/relation/enrollment/add/employee");
    },
    showPosLevelModal() {
      console.log(1);
    },
    ok() {},
    cancel() {},
    savePost() {
      console.log(this.formItem);
      this.postRightCardTitle = "新增岗位";

      http
        .post(org.postcreate, { data: { ...this.formItem } })
        .then(res => {
          this.$Message.success("保存成功");
          this.closeRightCard(); //关闭右侧快速编辑
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },

    // 获取岗位列表
    getPostList() {
      this.tableLoading = true;
      http
        .get(org.postlist, {})
        .then(res => {
          this.postList = res.data.list.data;
          this.tableLoading = false;
          console.log("岗位列表", res);
        })
        .catch(error => {
          this.tableLoading = false;
          this.$Message.error(error);
        });
    },

    // 岗位详情
    getPostDetail() {
      http
        .get(org.postshow, {})
        .then(res => {
          console.log("岗位详情", res);
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },

    // 获取组织列表
    getOrgList() {
      http
        .get(org.organizationlist, {})
        .then(res => {
          console.log("组织列表", res);
          this.orgList = res.data.list.data;
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },

    // 获取岗位类型列表
    getPostTypeList() {
      http
        .get(org.posttypelist, {})
        .then(res => {
          console.log("岗位类别列表", res);
          this.postTypeList = res.data.list.data;
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },

    // 获取岗位级别列表
    getPosLevelList() {
      http
        .get(org.postlevellist, {})
        .then(res => {
          console.log("职级列表", res);
          this.postLevelList = res.data.list.data;
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },

    // 查看岗位详情
    toPostDetail(a) {
      console.log(a);
      this.$router.push({
        path: "/org/job/job-detail",
        query: {
          post_id: a.post_id
        }
      });
    },

    // 岗位编辑
    toPostEdit(a) {
      console.log(a);
      this.postRightCardTitle = "编辑岗位";
      this.formItem = a;
      this.openRightCard();
    },

    // 设置organization_id
    selectOrg(e){
      console.log(e);
      let current = this.orgList.find( (i) =>{
        return i.organization_name == e;
      })
      let organization_id = current.organization_id;
      this.formItem.organization_id = organization_id;
    },

    // 
    selectPostType(e){
      console.log(e);
      let current = this.postTypeList.find( (i) =>{
        return i.post_type_name == e;
      })
      let post_type_id = current.post_type_id;
      this.formItem.post_type_id = post_type_id;
    }

  },
  mounted() {
    this.getPostList(); //岗位列表
    //this.getPostDetail();//岗位详情
    this.getOrgList(); //组织列表
    this.getPostTypeList(); //岗位类别列表
    // this.getPosLevelList();//获取职级列表
  }
};
</script>
<style lang="scss" scoped src="./index.scss"></style>